/* 指定编码集：utf-8 通配选择器页面元素统一
                     文本设定16px，字体家族：微软雅黑
					 超链接，列表样式去掉，盒子模型：元素默认存在外边距
	给父元素添加效果：宽高500*200 边框1px
	给所子元素添加效果：宽高100*100 背景颜色自定 字体大小自定
					  字体垂直居中，所有子元素左浮动
					  每一个子元素必须颜色不同
					  
					  
					  */
					 
	/* 群组选择器，抓取不同元素，统一添加效果 */
	div.d1,div.d2,div.d3,div.d4,div.d5{
		width: 100px;
		height: 100px;
		float: left;
		font-size: 17px;
		text-align: center;
		line-height: 100px;
	}				 
		
	@charset "utf8";
	
	*{
		font-size: 16px;
		font-family: "微软雅黑";
		text-decoration: none;
		list-style-type: none;
		
	}		
			 
	#father{
		/* 浮动卡住：第一步，父级元素宽度498px */
		width: 499px;
		/* 塌陷解决方案1：加高 经验 */
		height: 200px;
		/* 塌陷解决方案2：加溢出，子浮动元素算溢出 推荐 */
		overflow: hidden;
		border: 1px solid blue;
	}		
	#father div.d1{
		background: skyblue;
	}		
	#father  div.d2{
		 background: green;
		 /* 浮动卡住：第二步，d1高度130px */
		 height: 101px;
		 }
	  #father div.d3{
		   background: gray;
		 }
	#father  div.d4{
		background: orange;
		 }
	#father  div.d5{
		 background: pink;
		 /* 清除浮动 解决浮动卡住问题 纵向还是横向*/
		 clear: both;
		  }